<div ng-controller="TEIRegistrationController">    
    <!--registration form starts -->
    <form name="outerForm" novalidate>

        <!-- Entity type begins -->
        <div ng-if="!selectedProgramForRelative">
            <div class="section-label section-spacing vertical-spacing">
                {{'category'| translate}}
            </div>
            <table class="dhis2-list-table-striped dhis2-table-hover">
                <tr>
                    <td>
                        {{'entity_type'| translate}}
                    </td>
                    <td>
                        <select class="form-control" 
                                ng-model="trackedEntityTypes.selected" 
                                ng-disabled="selectedAttribute && selectedAttribute.trackedEntityType"
                                ng-options="trackedEntityType.displayName for trackedEntityType in trackedEntityTypes.available | orderBy: 'displayName'">                                
                        </select>                            
                    </td>
                </tr>                   
            </table>
        </div>
        <!-- Entity type ends -->        

        <!--custom registration form begins -->
        <div class="vertical-spacing" ng-if="customFormExists">

            <!-- enrollment and incidence dates begin -->
            <div ng-if="selectedProgramForRelative && !customForm.hasProgramDate">
                <div ng-include="'components/registration/enrollment-dates-form.html'"></div>
            </div>
            <!-- enrollment and incidence dates end -->

            <div ng-include="'../dhis-web-commons/angular-forms/custom-registration-form.html'"></div>

        </div>
        <!-- custom registration form ends-->

        <!-- default registration form begins -->
        <div class="vertical-spacing" ng-if="!customFormExists">            
            <div ng-if="selectedProgramForRelative" ng-include="'components/registration/enrollment-dates-form.html'"></div>
            <div ng-include="'components/registration/default-registration-form.html'"></div>
        </div>
        <!-- default registration form ends -->

        <div ng-if="formEmpty && outerForm.submitted">
            <div class="alert alert-warning">{{'form_is_empty_fill_at_least_one'| translate}}</div> 
        </div>

        <button type="button" class="btn btn-primary" ng-click="registerEntity()">{{'save'| translate}}</button>        
        <button type="button" class="btn btn-default small-horizontal-spacing" ng-click="showRegistration()">{{'cancel'| translate}}</button>

    </form>
    <!--registration form ends -->
  

    <div ng-if="warningMessages.length > 0">
        <div ng-include="'views/warnings.html'"></div>
    </div>
        
  </div>